import React, { Component } from 'react';
import { connect } from 'react-redux';
// import Typography from '@material-ui/core/Typography';
import { Button, TextField, AppBar, Toolbar, Paper, Tooltip, IconButton, Grid, Typography } from '@material-ui/core';
// tslint:disable-next-line:no-submodule-imports
import { createStyles, Theme, withStyles, WithStyles, styled, ThemeProvider } from '@material-ui/core/styles';
import { Search, Refresh } from '@material-ui/icons';
import { accountExistence } from './fallingmanagemenu.reducer';
import { login } from 'app/shared/reducers/authentication';
import { IRootState } from 'app/shared/reducers';
// import {  } from '@material-ui/core';
const MyButton = styled(Button)({
  borderBottom: '1px solid rgba(0, 0, 0, 0.12)'
});
const MyPaperOne = styled(Paper)({
  maxWidth: 936,
  margin: 'auto',
  overflow: 'hidden'
});
const MyAppBarOne = styled(AppBar)({
  borderBottom: '1px solid rgba(0, 0, 0, 0.12)'
});
const MySearchOne = styled(Search)({
  display: 'block'
});
const MyRefreshOne = styled(Refresh)({
  display: 'block'
});

export interface IFallingManageMenuContentProps extends StateProps, DispatchProps {}
export const Login = (props: IFallingManageMenuContentProps) => {};
class FallingManageMenuContent extends React.Component<IFallingManageMenuContentProps> {
  render() {
    return (
      <MyPaperOne>
        <MyAppBarOne position="static" color="default" elevation={0}>
          <Toolbar>
            <Grid container spacing={2} alignItems="center">
              <Grid item>
                <MySearchOne color="inherit" />
              </Grid>
              <Grid item xs>
                <TextField
                  fullWidth
                  placeholder="Search by email address, phone number, or user UID"
                  InputProps={{
                    disableUnderline: true
                  }}
                />
              </Grid>
              <Grid item>
                <MyButton variant="contained" color="primary">
                  Add user
                </MyButton>
                <Tooltip title="Reload">
                  <IconButton>
                    <MyRefreshOne color="inherit" />
                  </IconButton>
                </Tooltip>
              </Grid>
            </Grid>
          </Toolbar>
        </MyAppBarOne>
        <div style={{ margin: '40px 16px' }}>
          <Typography color="textSecondary" align="center">
            No users for this project yet
          </Typography>
        </div>
      </MyPaperOne>
    );
  }
}
const mapStateToProps = ({ authentication }: IRootState) => ({
  isAuthenticated: authentication.isAuthenticated,
  redirectMessage: authentication.redirectMessage,
  account: authentication.account,
  errorMessage: authentication.errorMessage,
  sessionHasBeenFetched: authentication.sessionHasBeenFetched,
  idToken: authentication.idToken,
  logoutUrl: authentication.logoutUrl
});

const mapDispatchToProps = { login, accountExistence };

type StateProps = ReturnType<typeof mapStateToProps>;
type DispatchProps = typeof mapDispatchToProps;

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(FallingManageMenuContent);
